<template>
	<view class="root-view">
		<view class="top-view">
			<view class="question-title">{{dimensionName}}</view>
			<view class="question-desc">({{question.month}}月龄题目,标号{{question.indexOnPaper}})</view>
		</view>
				
		<view class="middle-view">
			<view class="question-content">{{question.title}}</view>
			<view class="question-parentAnswer">{{parentAnswer()}}</view>
				
			<view style="position: relative;margin-top: 20rpx;" class="question-video">
				<video class="question-video" :src="question.guideVideo" :poster="guideVideoCover()" object-fit="cover"></video>
				<cover-image style="width: 8rpx;height: 8rpx;position: absolute;top: 0px;" src="../static/video_left_top.png"></cover-image>
				<cover-image style="width: 8rpx;height: 8rpx;position: absolute;bottom: 0px;" src="../static/video_left_bottom.png"></cover-image>
				<cover-image style="width: 8rpx;height: 8rpx;position: absolute;top: 0px;right: 0rpx;" src="../static/video_right_top.png"></cover-image>
				<cover-image style="width: 8rpx;height: 8rpx;position: absolute;bottom: 0rpx;right: 0rpx;" src="../static/video_right_bottom.png"></cover-image>
			</view>
				
			<view class="question-operation-guide">
				<text style="font-weight: bold;color: #000000;">操作方法：</text>{{question.operationGuide}}
			</view>
			<view class="question-pass-criteria">
				<text style="font-weight: bold;color: #000000;">通过标准：</text>{{question.passingCriteria}}
			</view>
		</view>
				
		<view v-if="question.tools && question.tools.length > 0" class="middle-view">
			<view class="item-title">测评道具</view>
			<view class="tool-view" :class="question.tools.length<3?'tool-view-single':''">
				<view v-for="(item,index) in question.tools" class="tool-item" @click="previewImage(index)" :key="item.id">
					<image :src="formatImageUrl(item.imgUrl,400,320)" mode="aspectFill" class="tool-cover"></image>
					<text class="tool-name">{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/utils/utils.js'
	export default {
		name: 'AssessOperationView',
		props: {
			dimensionName: {
				type: String,
				default () {
					return '';
				}
			},
			question: {
				type: Object,
				default (){
					return {
						tools: [],
					}
				}
			},
		},
		data() {
			return {
				
			};
		},
		methods: {
			parentAnswer() {
				if (this.question.asPossibleAs) {
					return '* '+this.question.asPossibleAsTips;
				}
				if (this.question.parentAnswer) {
					return '* 可询问宝宝家长';
				}
				return '';
			},
			guideVideoCover() {
				var coverUrl = '';
				coverUrl = this.question.guideVideoCover
				return utils.formatImageUrl(coverUrl, 640, 360)
			},
			
			previewImage(imgCurrent) {
				var urls = new Array();
				for (var index in this.question.tools) {
					var item = this.question.tools[index];
					if (!utils.isEmpty(item.imgUrl)) {
						urls[index] = item.imgUrl;
					}
				}
				uni.previewImage({
					current: imgCurrent,
					urls: urls,
				})
			},
			
			formatImageUrl(imgUrl, width, height) {
				return utils.formatImageUrl(imgUrl, width, height)
			},
		}
	}
</script>

<style lang="scss">

	.root-view{
		display: flex;
		flex-direction: column;
		background: #F7F7F7;
	}
	
	.top-view {
		background: rgba(250, 203, 47, 1);
		opacity: 1;
		border-radius: 4px;
	
		display: flex;
		flex-direction: row;
		align-items: center;
	
		padding-left: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		padding-right: 30rpx;
		
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		
		@include main-bg();
	}
	
	.question-title {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	.question-desc {
		font-size: 24rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	.middle-view {
		background: rgba(255, 255, 255, 1);
		opacity: 1;
		border-radius: 4px;

		display: flex;
		flex-direction: column;

		padding-left: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		padding-right: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.question-content {
		color: #333333;
		font-weight: bold;
		font-size: 50rpx;
		letter-spacing: 2rpx;
	}

	.question-parentAnswer {
		height: 30rpx;
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
		opacity: 1;
	}

	.item-title {
		font-size: 36rpx;
		color: #666666;
	}

	.question-video {
		align-self: center;
		width: 640rpx;
		height: 360rpx;
	}

	.question-operation-guide {
		margin-top: 30rpx;
		color: #333333;
		font-size: 30rpx;
	}

	.question-pass-criteria {
		margin-top: 20rpx;
		color: #333333;
		font-size: 30rpx;
	}

	.tool-view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// background-color: #007AFF;
	}

	.tool-view-single {
		justify-content: center;
	}

	.tool-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		text-align: center;
		font-size: 36rpx;
		margin-top: 20rpx;
	}

	.tool-cover {
		width: 150rpx;
		height: 120rpx;

		border-color: #E6E6E6;
		border-width: 1px;
		border-style: solid;
	}

	.tool-name {
		color: #999999;
		font-size: 24rpx;
		margin-top: 5rpx;
	}
</style>
